<template>
    <div>
        <el-dialog title="添加用户" :visible.sync="visible" width="400" :show-close="false" @close="cancle">
            <el-form ref="form" :model="form" label-width="80px" style="padding: 0 20px;">
                <el-form-item label="姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" style="text-align: left;">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.idcard"></el-input>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="form.birth"
                        style="width: 100%;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="cancle">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
    name: 'Add',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        myInfo: Object
    },
    data() {
        return {
            form: {
                name: ''
            },
            visible: false
        }
    },
    mounted() {
        console.log(this.form);
    },

    watch: {
        myInfo: function (newVal) {
            console.log(newVal);
            this.form = newVal;
        },
        dialogVisible:function(newVal){
            console.log(newVal);
            this.visible = newVal;
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
            localStorage.setItem('user', JSON.stringify(this.form));
            Message({
                message: '保存成功'
            });
            this.cancle()
        },
        cancle() {

            this.$emit('checkDialog', false);
        }
    }
}
</script>